<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px',
      }"
    >
      <view class="basic-style">
        <u-form-item label="业务分类" prop="categoryCode" :borderBottom="false" required @click="onChoice">
          <u--input
            disabled
            v-model="basicForm.categoryName"
            placeholder="请选择业务分类"
            border="surround"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{ color: '#B2B2B2' }"
            disabledColor="#ffffff"
          ></u--input>
        </u-form-item>
        <u-form-item label="合同占比(%)" prop="contractRate" required>
          <h-number-input
            placeholder="请输入合同占比"
            v-model="basicForm.contractRate"
            :digit="2"
            :max="99999999"
            :min="0"
            suffixIcon="edit-pen-fill"
          ></h-number-input>
        </u-form-item>
        <u-form-item label="合同分配额(元)" prop="contractAmount" :borderBottom="false" required>
          <h-money-input placeholder="请输入合同分配额" v-model="basicForm.contractAmount" suffixIcon="edit-pen-fill"></h-money-input>
        </u-form-item>
        <u-form-item label="切割合同额(元)" prop="cutContractAmount" :borderBottom="false" required>
          <h-money-input placeholder="请输入切割合同额" v-model="basicForm.cutContractAmount" suffixIcon="edit-pen-fill"></h-money-input>
        </u-form-item>
        <u-form-item label="生产团队" prop="productTeam" required>
          <h-select-team-input-popup
            style="width: 100%"
            v-model="basicForm.productTeam"
            objectField="basicForm.productTeam"
            placeholder="请选择生产团队"
            border="surround"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
            :tdlx="3"
            @realChange="handleChangeProductTeam"
          />
        </u-form-item>
        <!-- <u-form-item
          label="生产公司"
          prop="productCompanyId"
          :borderBottom="false"
          required>
          <h-select-company-input
            disabled
            style="width: 100%"
            v-model="basicForm.productCompanyId"
            border="surround"
            placeholder="请选择生产公司"
            suffixIcon="arrow-down-fill"
            :suffixIconStyle="{color: '#B2B2B2'}"
            objectField = 'managerTrusteeForm.gsdaId'
          ></h-select-company-input>
           </u-form-item> -->
				<u-form-item label="任务说明" prop="taskDescription">
				  <u--textarea
				    maxlength="500"
				    :confirm-type="null"
						count
				    v-model="basicForm.taskDescription"
				    placeholder="请输入任务说明"
				  ></u--textarea>
				</u-form-item>
      </view>

      <qian-tree
        ref="qiantree"
        lazy
        :multiple="false"
        :range="getFilesBusinessCategoryList"
        :foldAll="true"
        selectParent
        idKey="categoryCode"
        rangeKey="categoryName"
        @confirm="treeConfirm"
        @cancel="treeCancel"
      ></qian-tree>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="关闭" :plain="true" :loading="loading" @click="onClose"></u-button>
				<u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
import http from '@/utils/request/index'
import selectTaskProgressInput from '@/pages/synergy/components/selectTaskProgressInput.vue'
import {
  filesBusinessCategoryList, // 业务分类列表
} from '@/api/index.js'

export default {
  name: 'PriceForm',
  components: {
    selectTaskProgressInput,
  },
  props: {
    teamId: {
      type: [Number, String],
      default: '',
    },
    companyId: {
      type: [Number, String],
      default: '',
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
    estimatedContractAmount: {
      type: [Number, String],
      default: 0,
    },
    separateContractAmount: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      getFilesBusinessCategoryList: [], // 业务分类列表
      loading: false,
      basicForm: {
        categoryCode: '',
        contractAmount: '',
        cutContractAmount: '',
        contractRate: '',
        productTeam: '',
				taskDescription: '',
        productCompanyId:'',
        productTeam_dictText: '',
      },
      rules: {
        categoryCode: [{ required: true, message: '请选择业务分类' }],
        contractRate: [{ required: true, message: '请输入合同占比' }],
        contractAmount: [{ required: true, message: '请输入合同分配额' }],
        cutContractAmount: [{ required: true, message: '请输入切割合同额' }],
        productTeam: [{ required: true, message: '请选择生产团队' }],
      },
    }
  },
  created() {
    this.getList()
  },
  computed: {
    // 成员匹配合同额 和 任务委托合同额的计算，当改变后触发 watch 重新计算合同额占比
    rate() {
      return [this.basicForm.contractAmount, this.estimatedContractAmount]
    },
  },
  methods: {
    treeCancel() {
      this.showPopupInput = true
    },
    treeConfirm(item, index) {
      this.$set(this.basicForm, 'categoryCode', item[0].id)
      var serviceName = ''
      if (item[0] && item[0].parents && item[0].parents.length) {
        serviceName = item[0].parents[0].name + '/' + item[0].name
      } else {
        serviceName = item[0].name
      }

      this.$set(this.basicForm, 'categoryName', serviceName)
      this.showPopupInput = true
    },
    getList() {
      filesBusinessCategoryList().then((res) => {
        if (res.success) {
          this.getFilesBusinessCategoryList = res.result
        }
      })
    },
    // 点击选择
    onChoice() {
      this.showPopupInput = false
      this.$refs.qiantree._show()
    },
    handleChangeProductTeam(item) {
      if (!item) {
        this.$set(this.basicForm, 'teamLeader', undefined)
        this.$set(this.basicForm, 'teamLeader_dictText', undefined)
        this.$set(this.basicForm, 'productTeam_dictText', undefined)
        this.$set(this.basicForm, 'productCompanyId', undefined)
      } else {
        this.$set(this.basicForm, 'teamLeader', item.tdfzr)
        this.$set(this.basicForm, 'teamLeader_dictText', item.tdfzr)
        this.$set(this.basicForm, 'productTeam_dictText', item.aliasName)
        this.$set(this.basicForm, 'productCompanyId', item.belongCompanyId)
      }
    },
    reset() {
      this.$refs.form.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
      if (!this.index) {
        this.$emit('submit', [
          {
            id: parseInt(Math.random() * 1000000000000) + '',
            ...this.basicForm,
          },
          this.index,
        ])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
			this.reset()
    },
    onClose() {
      this.$emit('close')
    },
  }
}
</script>

<style scoped></style>
